<template>
	<div class="subpage ear-container">
		<ul class="ear-box">
			<li 
				v-for="(item, index) in listData"
				:key="index"
				@click="jumpEarDetail(item)"
			>
				<div class="ear-box-left">
					<img src="@/assets/img/home_img25.png" alt="">
					<span>耳标号</span>
				</div>
				<div class="ear-box-right">
					<span>ID{{item.cattleIdCard}}</span>
					<van-icon name="arrow" class="arrow-right" />
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	data() {
		return {
			listData: []
		}
	},
	created() {
		this.getCattleData()
	},
	methods: {
		jumpEarDetail(item) {
			this.$router.push({
				path: '/home/earidDetail/' + item.id + '/' + this.$route.params.type
			})
		},
		getCattleData(){
			let url = '';
			switch(this.$route.params.type) {  //type 1：商品详情跳转 2：采购订单详情跳转
				case '1':
					url = '/api/product/cattle_list/';
					break;
				case '2':
					url = '/api/order/get_cattle/';
					break;
			}
			this.$api.get(url + this.$route.params.id)
			.then((res)=>{
				this.listData = res.data;
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.ear-container {
		.ear-box {
			width: 100%;
			padding: 16px 16px 0;
			box-sizing: border-box;
			li {
				width: 100%;
				padding: 10px 16px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				font-size: 16px;
				color: #344047;
				border-radius: 8px;
				margin-bottom: 10px;
				.ear-box-left {
					display: flex;
					align-items: center;
					img {
						width: 36px;
						height: 36px;
						object-fit: cover;
						margin-right: 28px;
					}
				}
				.ear-box-right {
					display: flex;
					align-items: center;
					.arrow-right {
						margin-left: 10px;
					}
				}
			}
		}
	}
</style>
